<template>
    <div class="p-grid">
        <div class="p-col-12">
            <div class="card">
                <h4>阴影</h4>
                <p>阴影(<mark>.p-shadow-{level}</mark>) 是PrimeFlex的css样式，用于指定沿z轴的表面和元素之间的间距。</p>

                <div class="shadow-container">
                    <div class="p-col" v-for="index in 24" :key="index">
                        <div :class="['box', 'p-shadow-' + index]">
                            p-shadow-{{index}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
}
</script>

<style lang="scss" scoped>
.box {
    min-height: 100px;
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 2rem;
    border-radius: 4px;
}

.shadow-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
</style>
